<template>
  <div class="layout-all">
    <div style="clear:both;"></div>
    <el-tree :highlight-current=true :data="tableData" :props="defaultProps" :default-expand-all="tableData.length > 5">
       <div class="custom-tree-node flex_row_between" slot-scope="{ node, data }">
        <div class="tree_left flex_row_between">
          <div class="tree_item flex_row_between" >
            <el-tooltip class="item" effect="dark" content="标题" placement="top-start">
              <div  @click.stop="">{{data.title}}</div>
            </el-tooltip>
          </div>
          <div class="tree_item flex_row_between" v-if="data.cat_id">
                <el-tooltip class="item" effect="dark" content="菜单图标" placement="top-start">
                  <div @click.stop="">
                     <img width="50" :src="data.thumb" alt="">
                  </div>
                </el-tooltip>
          </div>
          <div class="tree_item flex_row_between" >
            <el-tooltip class="item" effect="dark" content="标题颜色" placement="top-start">
                  <div @click.stop="">
                    <el-color-picker :value="data.textColor" disabled></el-color-picker>
                  </div>
                </el-tooltip>
          </div>
          <div class="tree_item flex_row_between" v-if="data.cat_id">
            <el-tooltip class="item" effect="dark" content="边框颜色" placement="top-start">
                  <div @click.stop="">
                    <el-color-picker :value="data.frameColor" disabled></el-color-picker>
                  </div>
                </el-tooltip>
          </div>
           <div class="tree_item flex_row_between" v-if="!data.cat_id">
                <el-tooltip class="item" effect="dark" content="背景颜色" placement="top-start">
                  <div @click.stop="">
                    <el-color-picker value="data.backgroundColor" disabled></el-color-picker>
                  </div>
                </el-tooltip>
          </div>
          <div class="tree_item">
            <el-button type="primary" size="mini" v-if="data.status == 1" @click.stop="changeStatus(data,data.status,'status' )">启用</el-button>
            <el-button type="danger" size="mini" v-else @click.stop="changeStatus(data,data.status,'status' )">禁用</el-button>
          </div>
        </div>
        <div>
          <el-button type="primary" icon="el-icon-edit" circle @click.stop="editMenu(data)"></el-button>
          <el-button type="primary" icon="el-icon-delete" circle @click.stop="delMenu(data)"></el-button>
        </div>
      </div>

    </el-tree>
  </div>

</template>

<script>
export default {
  name:'UserCenterTree',
  props:['tableData',],
  data() {
    return {
        //树形控件参数
      defaultProps: {
        children: 'userCenter',
        label: 'title'
      },
      //树形控件数据
    }
  },
  methods: {
    editMenu (item) {
      this.$emit('editMenu',item)
    },
    delMenu (item) {
      this.$emit('delMenu',item)
    },
    changeStatus(item, val, field) {
      //分区状态
      var type = 'UserCenterCat'
      //菜单状态
      if (item.cat_id) {
        type = 'UserCenter'
      }
      this.update(item.id, val, field, type).then((e) => {
        if (e) {
          val == 1 ? item.status = 0 : item.status = 1
          this.$emit('getShowMenu')
        }
      });
    },
  }
}
</script>

<style lang="scss">
.el-tree{
  .el-tree-node__content {
    height:60px ;
  }
}
</style>

<style >
.flex_row_between {
  display: flex;
  align-items: center;
  justify-content: space-between;

}
.avatar_classify {
  width:50px;
  height:50px;
}
.avatar_classify .el-upload {
  width:50px;
  height:50px;
}
.avatar_classify .el-upload--picture-card {
  height:50px;
  width:50px;
  line-height: 50px;
  text-align: center;
}
.avatar_classify .el-upload--picture-card i {
  font-size:12px;
}
.tree_left {
  justify-content: flex-start;
}
.layout-all {
  margin-top: 20px;
  margin-left: 10px;
}
.layout-content {
  margin-top: 20px;
}
.el-tree-node__label {
  font-size:16px !important;
}

.custom-tree-node {
  padding-right:200px;
  width:100%;
}
.tree_item {
  font-size:14px;
  width:200px;
  justify-content: flex-start;
}
.item_discription {
  color:#000;
  font-size:12px;
  margin-right:10px;
}
.input_item {
  width:150px;
}
</style>>
